<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>乐器销售后台管理系统</title>

    <link rel="stylesheet" type="text/css" href="/static/back/css/style.css">
    <link rel="stylesheet" href="/static/back/css/bootstrap.css">
    <link rel="stylesheet" href="/static/back/js/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="/static/back/css/styleCaidan.css">
    <!--[if lt IE 9]>
    <script src="js/html5.js"></script>
    <![endif]-->
    <script src="/static/back/js/jquery.js"></script>
    <script src="/static/back/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="/static/back/js/bootstrap.min.js"></script>

    <!-- datatables -->
    <script src="/static/back/js/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/static/back/js/datatables/dataTables.bootstrap.js"></script>
    <script src="/static/back/js/datatables/js/jquery.dataTables.js"></script>
    <script src="/static/back/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
    <script src="/static/back/js/datatables/tabletools/dataTables.tableTools.min.js"></script>



    <script>
        (function ($) {
            $(window).load(function () {
                $("a[rel='load-content']").click(function (e) {
                    e.preventDefault();
                    var url = $(this).attr("href");
                    $.get(url, function (data) {
                        $(".content .mCSB_container").append(data); //load new content inside .mCSB_container
                        //scroll-to appended content
                        $(".content").mCustomScrollbar("scrollTo", "h2:last");
                    });
                });

                $(".content").delegate("a[href='top']", "click", function (e) {
                    e.preventDefault();
                    $(".content").mCustomScrollbar("scrollTo", $(this).attr("href"));
                });

                {#$('#drop1').collapse('show');#}
            });
        })(jQuery);
    </script>
</head>

<body>
<!--header-->
<header>
    <h1><img src="/static/back/images/admin_logo.png"/></h1>
    <ul class="rt_nav">
        <li><a href="{% url 'index_front' %}" target="_blank" class="website_icon">返回前台</a></li>
        <li><a href="#" class="admin_icon">{{ username }}</a></li>
        <li><a href="{% url 'login_back' %}" class="quit_icon">安全退出</a></li>
    </ul>
</header>
<!--aside nav-->

<!--aside nav-->
<aside class="lt_aside_nav content mCustomScrollbar">
    <ul>
        <li>
            <dl>
                <dt><a href="{% url 'index_back' %}" aria-expanded="false">
                主页</a>
                </dt>
            </dl>
        </li>
        <li>
            <dl>
                <dt><a href="#drop1" aria-expanded="false" data-toggle="collapse">
                商品信息</a>
                </dt>
                <div id="drop1" class="collapse list-unstyled ">
                    <!--当前链接则添加class:active-->
                    <dd><a href="{% url 'products_list' %}" id="1-1">商品列表</a></dd>
                    <dd><a href="{% url 'products_add' %}" id="1-2">添加商品</a></dd>
                    <dd><a href="{% url 'products_detail' %}" id="1-3">商品详情</a></dd>
                </div>
            </dl>
            <!--$('#drop2').collapse('show')-->
        </li>
        <li>
            <dl>
                <dt><a href="#drop2" aria-expanded="false" data-toggle="collapse">
                订单信息</a>
                </dt>
                <div id="drop2" class="collapse list-unstyled ">
                    <!--当前链接则添加class:active-->
                    <dd><a href="{% url 'order_list' %}" id="2-1">订单列表</a></dd>
                    <dd><a href="{% url 'order_detail' %}" id="2-2">订单详情</a></dd>
                </div>
            </dl>
        </li>
        <li>
            <dl>
                <dt><a href="#drop3" aria-expanded="false" data-toggle="collapse">
                会员管理</a>
                </dt>
                <div id="drop3" class="collapse list-unstyled ">
                    <!--当前链接则添加class:active-->
                    <dd><a href="{% url 'user_list' %}" id="3-1">会员列表</a></dd>
                    <dd><a href="{% url 'user_add' %}" id="3-2">添加会员</a></dd>
                    <dd><a href="{% url 'user_detail' %}" id="3-3">会员详情</a></dd>
                    <dd><a href="{% url 'user_rank' %}" id="3-4">会员等级</a></dd>
                </div>
            </dl>
        </li>

        <li>
            <dl>
                <dt><a href="#drop4" aria-expanded="false" data-toggle="collapse">
                配送设置</a>
                </dt>
                <div id="drop4" class="collapse list-unstyled ">
                    <!--当前链接则添加class:active-->
                    <dd><a href="{% url 'express_list' %}" id="4-1">配送方式</a></dd>
                </div>
            </dl>
        </li>

        <li>
            <dl>
                <dt><a href="#drop5" aria-expanded="false" data-toggle="collapse">
                在线统计</a>
                </dt>
                <div id="drop5" class="collapse list-unstyled ">
                    <!--当前链接则添加class:active-->
                    <dd><a href="{% url 'discharge_statistic' %}" id="5-1">流量统计</a></dd>
                    <dd><a href="{% url 'sales_volume' %}" id="5-2">销售额统计</a></dd>
                </div>
            </dl>
        </li>
    </ul>
</aside>


<section class="rt_wrap content mCustomScrollbar">
{% block content %}
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">

</style>

<!-- Table goes in the document BODY -->

<div class="rt_content">
    <h1 class="no-margin-bottom" align="center">乐器销售系统数据总览</h1>

    <table style="margin:0 auto; " >
        <tr>
            <th>
                <div class="page_title">
                    <h2 class="fl">会员总数：</h2>
                    <h1><b> 52 </b></h1>
                </div>
            </th>
            <th>
                <div class="page_title">
                    <h2 class="fl">商品总数：</h2>
                    <h1><b> 39 </b></h1>
                </div>
            </th>
        </tr>
        <tr>
            <th>
                <div class="page_title">
                    <h2 class="fl">销售额统计：</h2>
                    <h1><b> 15623 </b></h1>
                </div>
            </th>
            <th>
                <div class="page_title">
                    <h2 class="fl">订单数量：</h2>
                    <h1><b> 19 </b></h1>
                </div>
            </th>
        </tr>
        <tr>
            <th>
                    <h2 class="fl" style="margin-top: 50px;">销售额一周统计</h2>
            </th>
            <th  style="text-align:center">
                    <h2 class="fl" style="margin-top: 50px;">网站访问流量统计</h2>
            </th>
        </tr>
        <tr>
            <td>
                <div>
                    <div id="cylindrical" style="float:left;padding:10px;width : 600px">
                    </div>
                </div>

            <td>
                <div>
                    <div id="line" style="float:right;padding:10px;width : 600px">
                    </div>
                </div>
            </td>
        </tr>

    </table>

    <!--<div class="page_title">-->
    <!--<h2 class="fl">销售额统计</h2>-->
    <!--</div>-->
    <!--<input  value="本周销售额柱状图" />-->
    <!--<div >-->
    <!--<div id="cylindrical" style="float:left;padding:10px;">-->
    <!--</div>-->
    <!--</div>-->

    <!--<div class="page_title">-->
    <!--<h2 class="fl">网站访问流量统计</h2>-->
    <!--</div>-->
    <!--<input  value="生成网站访问流量折线图" />-->
    <!--<div >-->
    <!--<div id="line" style="float:right;padding:10px;">-->
    <!--</div>-->
    <!--</div>-->
</div>

<script src="/static/back/js/amcharts.js" type="text/javascript"></script>
<script src="/static/back/js/serial.js" type="text/javascript"></script>
<script src="/static/back/js/pie.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function (e) {
        GetSerialChart();
        MakeChart(json);
    });
    var json = [
  { "name": "周一", "value": "35" },
  { "name": "周二", "value": "60" },
  { "name": "周三", "value": "22" },
  { "name": "周四", "value": "65" },
  { "name": "周五", "value": "35" },
  { "name": "周六", "value": "22" },
  { "name": "周日", "value": "43" },
  ]
    //折线图
    AmCharts.ready(function () {
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = json;
        chart.categoryField = "name";
        chart.angle = 30;
        chart.depth3D = 20;
        //标题
        //chart.addTitle("3D折线图Demo", 15);
        var graph = new AmCharts.AmGraph();
        chart.addGraph(graph);
        graph.valueField = "value";
        //背景颜色透明度
        graph.fillAlphas = 0.3;
        //类型
        graph.type = "line";
        //圆角
        graph.bullet = "round";
        //线颜色
        graph.lineColor = "#8e3e1f";
        //提示信息
        graph.balloonText = "[[name]]: [[value]]";
        var categoryAxis = chart.categoryAxis;
        categoryAxis.autoGridCount = false;
        categoryAxis.gridCount = json.length;
        categoryAxis.gridPosition = "start";
        chart.write("line");
    });



</script>


<script type="text/javascript">
    $(document).ready(function (e) {
        GetSerialChart();
        MakeChart(json);
    });
    var json = [
  { "name": "周一", "value": "35" },
  { "name": "周二", "value": "60" },
  { "name": "周三", "value": "22" },
  { "name": "周四", "value": "65" },
  { "name": "周五", "value": "35" },
  { "name": "周六", "value": "22" },
  { "name": "周日", "value": "43" },
  ]
    //柱状图
    function GetSerialChart() {

        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = json;
        //json数据的key
        chart.categoryField = "name";
        //不选择
        chart.rotate = false;
        //值越大柱状图面积越大
        chart.depth3D = 20;
        //柱子旋转角度角度
        chart.angle = 30;
        var mCtCategoryAxis = chart.categoryAxis;
        mCtCategoryAxis.axisColor = "#efefef";
        //背景颜色透明度
        mCtCategoryAxis.fillAlpha = 0.5;
        //背景边框线透明度
        mCtCategoryAxis.gridAlpha = 0;
        mCtCategoryAxis.fillColor = "#efefef";
        var valueAxis = new AmCharts.ValueAxis();
        //左边刻度线颜色
        valueAxis.axisColor = "#ccc";
        //标题
        valueAxis.title = "每周销售额柱状图";
        //刻度线透明度
        valueAxis.gridAlpha = 0.2;
        chart.addValueAxis(valueAxis);
        var graph = new AmCharts.AmGraph();
        graph.title = "value";
        graph.valueField = "value";
        graph.type = "column";
        //鼠标移入提示信息
        graph.balloonText = "[[category]] [[value]]";
        //边框透明度
        graph.lineAlpha = 0.3;
        //填充颜色
        graph.fillColors = "#b9121b";
        graph.fillAlphas = 1;

        chart.addGraph(graph);

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorAlpha = 0;
        chartCursor.zoomable = false;
        chartCursor.categoryBalloonEnabled = false;
        chart.addChartCursor(chartCursor);

        chart.creditsPosition = "top-right";

        //显示在Main div中
        chart.write("cylindrical");
    }




</script>

{% endblock %}
</section>

</body>
</html>
